<html>
<head>
    <meta charSet="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Example</title>
    <link rel="stylesheet" href="./../../base/bass.css"/>
    <style>
        body,#app {
            height: 100vh;
            width: 100vw;
            overflow: hidden;
        }
        #toolbox {
            background: #f4f4f4;
            height: 30px;
            width: 100vw;
            display: flex;
        }
        #toolbox div {
            height: 30px;
            line-height: 30px;
            background: #cee8f8;
            /*margin: 0px 5px;*/
            padding: 0 5px;
            cursor: pointer;
        }
        #toolbox div:hover {
            background: #9ab3f5;
        }
        #toolbox div:before {
            content: "|";
            padding-left: 2px;
        }
        #toolbox div:after {
            content: "|";
            padding-left: 2px;
        }
        #content {
            height: calc(100vh - 30px);
            width: 100vw;
            display: flex;
        }
        #setting,#echart {
            height: 100%;
            /*transition: width 1s;*/
        }
        #setting {
            background: #fff8f0;
            width: 200px;
            display: flex;
            flex-direction: row;
        }
        #setting-content,#setting-slider {
            height: 100%;
        }
        #echart {
            width: calc(100% - 200px);
            background: #fff8f0;
        }
        #lines li {
            line-height: 30px;
        }
        #lines span {
            cursor: pointer;
            padding: 0 5px;
            border-radius: 5px;
        }
        #lines li span:hover {
            background: #ffefdc;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="toolbox">
        </div>
        <div id="content">
            <div id="setting">
                <div id="setting-content" style="width: calc(100% - 5px);">
                    <div style="margin: 16px;cursor: pointer;"><span>应用修改</span></div>
                    <hr/>
                    <table style="width: 100%;table-layout: fixed;">
                        <tbody id="setting-names">
                        </tbody>
                    </table>
                    <hr/>
                    <div>
                        <ul id="lines" style="padding-right: 20px;">
<!--                            <li></li>-->
                        </ul>
                    </div>
                </div>
                <div id="setting-slider" style="width: 5px;cursor: e-resize;background: #e2ddfc;"></div>
            </div>
            <div id="echart"></div>
        </div>
    </div>
</body>
<script>
    let klines = (new class {
        constructor() {
            this.echart = null;
            this.datas = [];
            this.setting = {
                lines: [5,10,20,30,60],
                names: {
                    Close: {
                        text: '收',
                        value: 'Close'
                    },
                    Open: {
                        text: '开',
                        value: 'Open'
                    },
                    Low: {
                        text: '低',
                        value: 'Low'
                    },
                    High: {
                        text: '高',
                        value: 'High'
                    }
                },
                guss: {
                    active: true,
                    type: 'rand',
                    days: 20
                },
                cutLength: 0
            };
            this.initDom();
        }
        initDom() {
            let tbody = document.getElementById('setting-names');
            for (let i in this.setting.names) {
                tbody.innerHTML += `<tr>
                    <td align="left" style="word-wrap:break-word;width: 20px;">${this.setting.names[i].text}</td>
                    <td><input name="${i}" style="width: calc(100% - 6px);" type="text" value="${this.setting.names[i].value}"></td>
                </tr>`;
            }
            let $this = this;
            let inp = tbody.getElementsByTagName('input');
            for (let i = 0;i < inp.length;i++) {
                inp[i].onchange = function () {
                    let name = this.getAttribute('name');
                    let value = this.value;
                    $this.setting.names[name].value = value;
                };
            }
        }
        setDatas(data,path) {
            if (!path) {
                this.datas = data;
            } else if (!data) {
                // this.datas
                path.split('.').forEach(p => {
                    if (p in this.datas) {
                        this.datas = this.datas[p];
                    }
                });
            } else {
                this.setDatas(data);
                this.setDatas(null,path);
            }
        }
        init() {
            if (!this.echart) {
                this.echart = echarts.init(document.getElementById('echart'));
            }
            let names = {};
            for (let i in this.setting.names) {
                names[i] = this.setting.names[i].value;
            }
            this.echart.setOption(
                getOption(
                    this.datas,
                    this.setting.lines,
                    names,
                    this.setting.guss.active ? this.setting.guss : null,
                    this.setting.cutLength
                )
            );
        }
    });
    let linesSetting = (new class {
        constructor() {
            this.dom = null;
            this.updateLi = null;
            this.list = [];
        }
        setUpdateLi(fn) {
            this.updateLi = fn;
        }
        getDom(lines) {
            let $this = this;
            let addLi = $this.addLi.bind($this);
            this.dom.html(`<li><span tar="add">添加</span></li>`);
            this.list = lines;
            lines.forEach(addLi);
            this.dom.find(`[tar="add"]`).on('click',function () {
                LayerApis.createInput('inp',"number",{min:1,max:1000,step:1}).then(_=>+_).then(num => {
                    if (!$this.list.includes(num)) {
                        addLi(num);
                        $this.list.push(num);
                        $this._updateLi();
                    }
                });
            });
        }
        _updateLi() {
            this.updateLi(this.list);
        }
        addLi(n) {
            let $this = this;
            this.dom.append(`<li>${n}<span tar="del" ind="${n}" style="float:right;">删除</span></li>`);
            this.dom.find(`[ind="${n}"]`).on('click',function () {
                let n = +this.getAttribute('ind');
                $this.list.splice($this.list.indexOf(n),1);
                $this._updateLi();
            })
        }
    });
    // 对象深搜
    let objDepSearch = (obj,path) => {
        let arr = [];
        path = path ? `${path}.` : '';
        for (let i in obj) {
            let type = typeof obj[i];
            if (type === 'object') {
                if (obj[i] instanceof Array) {
                    type = 'array';
                }
            }
            arr.push({
                path: `${path}${i}`,
                type,
            });
            if (type === 'object') {
                arr.concat(...objDepSearch(obj[i],`${path}${i}`));
            }
        }
        return arr;
    };
    let funs = [
        {
            text: '打开文件',
            click() {
                OtherUtils.OpenFile().then(txt => {
                    txt = JSON.parse(txt);
                    let paths = objDepSearch(txt,'').filter(_ => _.type === 'array');
                    // console.log(txt);
                    // console.log(paths);
                    if (paths.length === 1) {
                        klines.setDatas(txt,paths[0].path);
                    } else if (!paths.length) {
                        klines.setDatas(txt);
                    } else {
                        LayerApis.createRadio(paths.map(_ => {
                            return {
                                value: _.path,
                                text: _.path
                            }
                        }),'选择数据路径').then(path => {
                            klines.setDatas(null,path);
                        });
                    }
                });
            }
        },
        // {
        //     text: '修改参数',
        //     click() {}
        // },
        {
            text: '绘制',
            click() {
                klines.init();
            }
        },
        {
            text: '猜测',
            click() {
                LayerApis.createRadio([
                    {
                        value: 'lift',
                        text: '连涨'
                    },
                    {
                        value: 'down',
                        text: '连跌'
                    },
                    {
                        value: 'rand',
                        text: '随机'
                    },
                ],"趋势").then(value => {
                    LayerApis.createInput("天数","number","").then(_=>+_).then(days => {

                    });
                });
            }
        }
    ];
    window.main = function () {
        let tb = $("#toolbox");
        funs.forEach(f => {
            let id = `id_${new Date().getTime()}_${parseInt(Math.random() * 100)}`;
            tb.append(`<div id="${id}">${f.text}</div>`);
            $(`#${id}`).on('click',f.click);
        });
        DomUtils.BandDrag(document.getElementById('setting-slider'),document.getElementById('setting'),document.getElementById('echart'),function() {
            klines.echart.resize();
        });
        // $('#setting-content')
        linesSetting.dom = $('#lines');
        linesSetting.setUpdateLi(function (li) {
            klines.setting.lines = li;
            klines.init();
        });
        linesSetting.getDom(klines.setting.lines);
    }
    let sc = document.createElement('script');
    sc.src = "./../../base/utils/loadFiles.js";
    sc.onload = function () {
        let files = [
            {link: './getOption.js', text: ''},
            {link: './../../base/utils/requests.js', text: ''},
            {link: './../../base/utils/domUtils.js', text: ''},
            {link: './../../base/utils/otherUtils.js', text: ''},
            {link: './../../base/loading/loading.css', text: ''},
            {link: './../../base/loading/Loading.js', text: 'Loading JS'},
            // {link: './../../base/Slider/jquery.1.2.6.js', text: ''},
            {link: './../../base/Others/echarts.js', text: ''},
            {link: './../../base/layer/jquery.min.js', text: ''},
            {link: './../../base/layer/layer.js', text: ''},
            {link: './../../base/layer/layer-apis.js', text: ''},
        ];
        window.loading = null;
        if (window.parent !== window) {
            if (window.parent.loading) {
                window.loading = window.parent.loading;
                files.shift();
                files.shift();
            }
        }
        let lf = new LoadFiles();
        lf.addFile(files).load(o => {
            if (!o.start) {
                o.next();
                if (o.over) {
                    window.loading.hide();
                    window.main();
                } else if (o.file.text === 'Loading JS') {
                    window.loading = new Loading();
                }
            }
        });
    }
    document.head.append(sc);
</script>
</html>
